<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>圣诞</title>

  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <body>
    <div style="text-align:center;clear:both;">
      <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
      <script src="/follow.js" type="text/javascript"></script>
    </div>
    <div class="wrapper">
      <div class="border-circle" id="one"></div>
      <div class="border-circle" id="two"></div>
      <div class="background-circle">
        <div class="triangle-light"></div>
        <div class="body"></div>
        <span class="shirt-text">I</span>
        <span class="shirt-text">'</span>
        <span class="shirt-text">M</span>
        <span class="shirt-text">Y</span>
        <span class="shirt-text">J</span>
        <div class="triangle-dark"></div>
      </div>
      <div class="head">
        <div class="sdm">
          <img src="./images/sdm.png" alt="">
        </div>
        <div class="ear" id="left"></div>
        <div class="ear" id="right"></div>
        <div class="hair-main">
          <div class="sideburn" id="left"></div>
          <div class="sideburn" id="right"></div>
          <div class="hair-top"></div>
        </div>
        <div class="face">
          <div class="hair-bottom"></div>
          <div class="nose"></div>
          <div class="eye-shadow" id="left">
            <div class="eyebrow"></div>
            <div class="eye"></div>
          </div>
          <div class="eye-shadow" id="right">
            <div class="eyebrow"></div>
            <div class="eye"></div>
          </div>
          <div class="mouth"></div>
          <div class="shadow-wrapper">
            <div class="shadow"></div>
          </div>
        </div>
      </div>

      <span class="music-note" id="one">&#9835;</span>
      <span class="music-note" id="two">&#9834;</span>
    </div>
    <div class="wish-text">
      <span class="wish-word">M</span>
      <span class="wish-word">e</span>
      <span class="wish-word">r</span>
      <span class="wish-word">r</span>
      <span class="wish-word">y</span>
      <span style="margin-left:10px;"></span>
      <span class="wish-word">C</span>
      <span class="wish-word">h</span>
      <span class="wish-word">r</span>
      <span class="wish-word">i</span>
      <span class="wish-word">s</span>
      <span class="wish-word">t</span>
      <span class="wish-word">m</span>
      <span class="wish-word">a</span>
      <span class="wish-word">s</span>
    </div>
    <audio src="./music/BGM 01.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>
  </body>
  <script>
    function audioAutoPlay(id) {
      var audio = document.getElementById(id),
        play = function () {
          audio.play();
          document.removeEventListener("touchstart", play, false);
        };
      audio.play();
      document.addEventListener("WeixinJSBridgeReady", function () {
        play();
      }, false);
      document.addEventListener('YixinJSBridgeReady', function () {
        play();
      }, false);
      document.addEventListener("touchstart", play, false);
    }
    audioAutoPlay('Jaudio');
  </script>

</html>

</body>

</html>